<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入js库 -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/qrcode.js"></script>

    <style>

        input {
            display: block;
            width: 500px;
            text-align: center;
            margin: auto;
        }

        div {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: #f00;
        }

    </style>
</head>
<body>
    
    <input type="text" id="text" value="https://www.baidu.com">
    <div id="qrcode"></div>

    <script>

        // 步骤：
        //  1，引入js库
        // 2，创建二维码

        // 获取二维码对象
        const qrcode = new QRCode(document.getElementById('qrcode'));

        //  创建二维码
        function makeCode() {
            const elText = document.getElementById('text');

            if(!elText.value) {
                alert("内容不能为空");
                elText.focus() ;
                return ;
            }
            
            qrcode.makeCode(elText.value) ;
        }

        makeCode() ;

        // 事件监听
        $("#text").
            on("blur" , function() {
                makeCode() ;
            }).
            on("keydown" , function(e) {
                if (e.keyCode == 13) {
                    makeCode() ;
                }
            })


        
          


    // JQuery（JavaScript jQuery）实际上是对现有的JavaScript的一种扩展，压缩后大概32kb，兼容于各种农浏览器。可以非常方便的添加适用于多种浏览器的特效，最主要能将复杂的代码简化，提供连缀编程模式，很大程度上简化了代码的操作
    //  jq  简易的DOM操作和链式操作

    // QRCode.js (Quick Response Code)是一个用于生成二维码的 JavaScript 库。 主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
    </script>
</body>
</html>